
import 'package:valovault_reminder/common/config/val_assets_name.dart';
import 'package:valovault_reminder/pages/base/val_app_common_bar.dart';
import 'package:valovault_reminder/pages/base/val_base_ui_page.dart';
import 'package:valovault_reminder/pages/home/models/val_post_record_model.dart';
import 'package:valovault_reminder/util/val_screen_size_kit.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ValHomeMaintenanceDetailPage extends StatefulWidget {
  final ValPostRecordModel listModel;

  const ValHomeMaintenanceDetailPage({super.key, required this.listModel});

  @override
  State<ValHomeMaintenanceDetailPage> createState() => _ValHomeMaintenanceDetailPageState();
}

class _ValHomeMaintenanceDetailPageState extends ValBaseUIPageState<ValHomeMaintenanceDetailPage> {
  final FocusNode titleFieldNode = FocusNode();
  final FocusNode contentFieldNode = FocusNode();
  final FocusNode timeFieldNode = FocusNode();
  RxInt inputLength = 0.obs;
  final TextEditingController titleController = TextEditingController();
  final TextEditingController contentController = TextEditingController();
  final TextEditingController timeController = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    isAppBar = true;
    extendBodyBehindAppBar = true;
    titleController.text = widget.listModel.title;
    contentController.text = widget.listModel.content;
    timeController.text = widget.listModel.publishDate;
  }

  @override
  PreferredSizeWidget? get appBar {
    return ValAppCommonBar(
      backgroundColor: Colors.transparent,
      title: 'Details',
      titleColor: Colors.white,
      brightness: Brightness.dark,
      leadingWidget: GestureDetector(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Image.asset(
            '${ValAssetsName.ASSETS_HOME}val_common_nav_back.png',
            width: 30,
            height: 30,
          )
      ),
    );
  }

  Widget createInputView(String title, TextEditingController inputController, FocusNode contentNode, {double topOffset = 10, double height = 45}) {
    return Container(
      margin: EdgeInsets.only(left: 0, right: 0, top: topOffset),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: const EdgeInsets.only(left: 6, right: 6),
            child: Text(title,
              style: const TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.w600),),
          ),
          Container(
            height: height,
            alignment: Alignment.centerLeft,
            child: TextField(
              controller: inputController,
              style: const TextStyle(fontSize: 20, color: Colors.white),
              focusNode: contentNode,
              maxLength: 100,
              enabled: false, //禁止输入
              onTapOutside: (e) {
                contentNode.unfocus();
              },
              decoration: const InputDecoration(
                counterText: '', //自带计算长度提示
                hintText: 'Please input content',
                hintStyle: TextStyle(fontSize: 20, color: Color.fromRGBO(255, 255, 255, 0.5)),
                isDense: true,
                contentPadding: EdgeInsets.only(left: 6, top: 10, right: 10),
                border: OutlineInputBorder(
                  gapPadding: 0,
                  borderSide: BorderSide(
                    width: 0,
                    style: BorderStyle.none,
                  ),
                ),
              ),
            ),
            // const Text('Enter your title：', style: TextStyle(color: Color.fromRGBO(0, 0, 0, 0.5), fontSize: 20,),),
          ),
          Container(
            height: 1,
            margin: const EdgeInsets.only(top: 6, bottom: 0),
            color: const Color.fromRGBO(255, 255, 255, 0.5),
          ),
        ],
      ),
    );
  }

  Widget createAccidentContentView() {
    return Container(
      margin: const EdgeInsets.only(left: 0, right: 0, top: 6),
      height: 130,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: const EdgeInsets.only(left: 6, right: 6, bottom: 6),
            child: const Text('Content',
              style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.w600),),
          ),
          Expanded(
            child: Container(
              padding: const EdgeInsets.only(left: 8, right: 8),
              child: Column(
                children: [
                  Expanded(
                    child: TextField(
                      controller: contentController,
                      style: const TextStyle(fontSize: 12, color: Colors.white, fontWeight: FontWeight.normal),
                      focusNode: contentFieldNode,
                      textInputAction: TextInputAction.send,
                      keyboardType: TextInputType.multiline,
                      minLines: 1,
                      maxLines: 100,
                      maxLength: 200,
                      onTapOutside: (e) {
                        contentFieldNode.unfocus();
                      },
                      onChanged: (value) {
                        // setState(() {
                        inputLength = value.length.obs;
                        // });
                      },
                      decoration: const InputDecoration(
                        counterText: '', //超长提示
                        hintText: 'Please input content',
                        hintStyle: TextStyle(fontSize: 12, color: Color.fromRGBO(255, 255, 255, 0.5)),
                        isDense: true,
                        contentPadding: EdgeInsets.only(left: 0, top: 0, right: 0),
                        border: OutlineInputBorder(
                          gapPadding: 0,
                          borderSide: BorderSide(
                            width: 0,
                            style: BorderStyle.none,
                          ),
                        ),
                      ),
                    ),
                  ),
                  // Container(
                  //   height: 20,
                  //   padding: const EdgeInsets.only(right: 6),
                  //   alignment: Alignment.centerRight,
                  //   child: Obx(() => Text('$inputLength/200',
                  //     style: const TextStyle(color: Color.fromRGBO(0, 0, 0, 0.3), fontSize: 10),)
                  //   ),
                  // ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        // 背景色
        Positioned(
          top: 0, left: 0, right: 0, bottom: 0,
          child: Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Color(0xFF143B42),
                    Color(0xFF080822),
                  ],
                ),))
        ),
        // 顶部图片
        Positioned(
          top: ValScreenSizeKit.getInstance().statusBarHeight + 44, left: 0, right: 0, height: 364,
          child: Container(
            decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage('${ValAssetsName.ASSETS_HOME}val_home_detail_top_ground.png'), fit: BoxFit.fill),
            ),
            child: Container(
              margin: const EdgeInsets.only(left: 9, top: 8, bottom: 30, right: 9),
              decoration: const BoxDecoration(
              image: DecorationImage(
              image: AssetImage('${ValAssetsName.ASSETS_HOME}val_home_detail_car_icon.png'), fit: BoxFit.fill),
              ),
            ),
          )
        ),

        Positioned(
          top: ValScreenSizeKit.getInstance().statusBarHeight + 44 + 344, left: 0, right: 0, height: 364,
          child: SingleChildScrollView(
            child: Column(
              children: [
                //输入内容
                Container(height: 381,
                  margin: const EdgeInsets.only(left: 24, right: 24, top: 10),
                  child: Column(
                    children: [
                      createInputView('Name', titleController, titleFieldNode),
                      createInputView('Time', timeController, timeFieldNode),
                      createAccidentContentView(),
                    ],
                  ),
                ),
                const Padding(padding: EdgeInsets.only(top: 20)),
              ],
            ),
          ),
        )
      ],
    );
  }
}
